<template>
  <div class="w-100 h-100 p-4 border-box bg-deep color-white flex-vertical font3">
    <div class="d-flex align-items-center justify-content-between bg-cover round-md p-4 mb-4">
      <el-form inline :model="form">
        <el-from-item class="mb-0">
          <span>养殖场和设备选择</span>
          <el-cascader v-model="form.select" :options="option" />
          <!-- @change="handleChange" -->

        </el-from-item>

        <el-form-item class="mb-0">
          <el-date-picker v-model="form.date" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" format='yyyy-MM-dd' value-format='yyyy-MM-dd' />
        </el-form-item>


      </el-form>
      <div>
        <el-button icon="el-icon-search" type="primary"  v-loading="loading1" @click="getList">查询</el-button>
        <el-button icon="el-icon-download" type="warning" class="ml-3" :loading="exportLoading" @click="onExport">导出
        </el-button>
      </div>
    </div>
    <div class="bg-cover round-md py-4">
      <el-table class="w-100 custom" :data="tableData.slice(
        (currentPage- 1) * pageSize,
        currentPage * pageSize
      )" size="large" :height="height" v-loading="loading1" element-loading-background="rgba(0, 0, 0, 0.8)">

          <!-- <el-table-column prop="" label="传感器编号" align="center"></el-table-column> -->

          <el-table-column prop="EQUIPMENT_id" label="设备号" align="center" v-if="type == '2'"></el-table-column>
          <el-table-column prop="TEM" label="温度" align="center" v-if="type == '2'"></el-table-column>
          <el-table-column prop="PH" label="PH" align="center" v-if="type == '2'"></el-table-column>
          <el-table-column prop="O2" label="溶氧" align="center" v-if="type == '2'"></el-table-column>
          <el-table-column prop="SALT" label="盐度" align="center" v-if="type == '2'"></el-table-column>
          <el-table-column prop="VOLTAGE" label="电压" align="center" v-if="type == '2'"></el-table-column>
          <el-table-column prop="ORP" label="ORP" align="center" v-if="type == '2'"></el-table-column>
          <el-table-column prop="ACQUISITION_TIME" label="采集时间" align="center" v-if="type == '2'"></el-table-column>
          <!-- <el-table-column prop="CREATE_TIME" label="创建时间" align="center"></el-table-column> -->
          <!-- <el-table-column prop="UPDATE_TIME" label="修改时间" align="center"></el-table-column> -->

        
          <!-- <el-table-column prop="ID" label="传感器编号" align="center"></el-table-column> -->
          <el-table-column prop="EQUIPMENT_id" label="设备号" align="center" v-if="type == '1'"></el-table-column>
          <el-table-column prop="TEM" label="温度" align="center" v-if="type == '1'"></el-table-column>
          <el-table-column prop="HUMIDITY" label="湿度" align="center" v-if="type == '1'"></el-table-column>
          <el-table-column prop="LIGHT" label="光照" align="center" v-if="type == '1'"></el-table-column>
          <el-table-column prop="ATM" label="气压" align="center" v-if="type == '1'"></el-table-column>
          <el-table-column prop="WIND_SPEED " label="风速" align="center" v-if="type == '1'"></el-table-column>
          <el-table-column prop="WIND_DIRECTION" label="风向" align="center" v-if="type == '1'"></el-table-column>
          <el-table-column prop="RAINFALL" label="雨量" align="center" v-if="type == '1'"></el-table-column>
          <el-table-column prop="RADIATION" label="辐射量" align="center" v-if="type == '1'"></el-table-column>

          <el-table-column prop="ACQUISITION_TIME" label="采集时间" align="center" v-if="type == '1'"></el-table-column>
          <!-- <el-table-column prop="CREATE_TIME" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="UPDATE_TIME" label="修改时间" align="center"></el-table-column> -->
        



      </el-table>
      <div class="text-right mt-4 pr-4">
        <el-pagination class="custom" background @size-change="onSizeChange" @current-change="onCurrentChange"
          :current-page="currentPage" :page-sizes="[20, 40, 80, 160]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
// import { homelist } from '@/request/api';
import { getBaseEquipment, getReportData } from '@/request/api';

// import { saveAs } from '@/utils/FileSaver.min.js'
import * as XLSX from 'xlsx'
// 数据保存

export default {
  name: 'dataReport',
  data() {
    return {
      height: 0,
      loading1: false,
      exportLoading: false,
      form: {
        date: ['',''],
        select: ''
      },
      currentPage: 1,
      pageSize: 20,
      total: 0,
      type: 0,//数据类型
      tableData: [],
      value: [],
      option: [],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = document.body.clientHeight - 330;
    })
    // this.getlist();
    this.get_option();
  },
  methods: {
    // 级联菜单内容
    get_option() {
      getBaseEquipment({

      }).then(res => {
        this.option = res.option


      })


    },

    // 页展示数量改变
    onSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getList();
    },
    // 页码改变
    onCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getList();
    },
    // 获取列表
    getList() {
      this.loading1 = true;

      // console.log(this)
      var e_name = this.option.filter((item, index) => {
        return item.value == this.form.select[0];

      })
      e_name = e_name[0].children.filter((item, index) => {
        return item.value == this.form.select[1];
      })
      this.e_name = e_name[0].label
      // console.log(this)
     
      this.tableData=[]
      if (this.form.date[0]=="" || this.form.date[1]=="")
      {
        this.$message.error('请选择查询日期范围。');
        // this.loading1 = false;
        return 
      }

      getReportData({
        base_id:this.form.select[0],
        e_id: this.form.select[1],
        e_name: this.e_name,
        s_date: this.form.date[0],
        end_date: this.form.date[1],

      }).then(res => {
        this.tableData = res.data
        this.total = this.tableData.length
        this.type = res.type
        this.loading1 = false;
        // console.log(this.tableData)

      }).catch(err => {
        this.$message.error('出错了，请检查后重试');
      })
      // this.loading1 = false;

      // 发送请求
    },
    // 导出
    onExport() {
      this.exportLoading = true;
      const data = XLSX.utils.json_to_sheet(this.tableData)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, data, 'kalacloud-data')
      var file_name = this.e_name + '_' + this.form.date[0] + '_' + this.form.date[1]
      XLSX.writeFile(wb, file_name + '.xlsx')
      this.exportLoading = false;



      // 发送请求
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/variable.less';

/deep/ .el-input__inner {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none;
  color: @colorWhite !important;
}

/deep/ .el-date-editor {
  .el-range-separator {
    color: @colorWhite;
  }

  .el-range-input {
    background: transparent;
    color: @colorWhite;
  }
}
</style>